<template>
    <div @click="preview">
        <slider :announcement="announcement"  :slides="slides"></slider>
        <booklist :books="books"
                  heading="最近更新"
                  @onBookSelect="preview(book)"
                  @click="preview"></booklist>
        <booklist :books="recommended"
                  heading="优秀推荐"
                  @onBookSelect="preview(book)"
                  @click="preview"></booklist>
    </div>

</template>

<script type="text/ecmascript-6">
    import slider from './slider.vue'
    import booklist from './booklist.vue'

    export default{
        components:{slider,booklist},
        beforeMount(){
            console.log("beforeMount");
        },
        mounted(){
            console.log("mounted");
        },
        created(){
            console.log("created");
            this.$http.get('/data.json').then(res=>{
                this.books=res.body.books;
                this.recommended=res.body.recommended;
                this.announcement=res.body.announcement;
                this.slides=res.body.slides;
                    }
            )
        },
        data(){
          return{
              books:[],
              recommended:[],
              announcement:[],
              slides: []
          }
        },
        methods:{
            preview(){
                window.alert("aaaaaaaa");
            }
        }
    }
</script>